<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>连接线绘制</title>
    <script src="jquery-3.6.0.js"></script>
    <!--    <script src="draw.js"></script>-->
</head>
<body>
<svg id="svg-canvas" height="2000px" width="2000px">
    <line x1="652" y1="327" stroke="dodgerblue" stroke-width="2" x2="1244" y2="158"></line></svg>
<script>
    $("#svg-canvas").click(e => {
        let newLine = $("<line></line>")
        newLine.attr({
            "x1": `${e.pageX}`,
            "y1": `${e.pageY}`,
            "stroke": "dodgerblue",
            "stroke-width": "2",
        });
        $("#svg-canvas").append(newLine)
        $("#svg-canvas").mousemove(e2 => {
            newLine.attr({
                "x2": `${e2.pageX}`,
                "y2": `${e2.pageY}`,
            });
        });
    })
</script>

</body></html>